import React, { useEffect, useState } from 'react'

function useStateDome() {
    const [count, setCount] = useState(0)
    // useEffect相当于componentDidMount 和componentDidUpdate
    // 会在页面加载完之后执行一次，数据更新之后加载一次
    useEffect(() => {
        console.log('进入和更新');

        // 加了return之后，会在销毁和更新阶段触发return的函数
        return () => {
            console.log('离开和更新');
        }

        // useEffect第二个参数添加空数组，代表只有在开始和销毁阶段触发对应的函数
        // [count]，如果传入count，代表只在数组里的数据发生变化的时候触发函数
        // 如果不传，那么只要这个页面数据发生变化都会触发
    }, [count])
    return (
        <>
            <p>useEffect</p>
            <div>{count}</div>
            <button onClick={() => { setCount(count + 1) }}>click</button>
        </>
    )
}

export default useStateDome;